<template>
  <div class="app-container">
    
    <el-input type="textarea" v-model="id"></el-input>
    <el-button type="primary" round @click="add">添加</el-button>
    <el-button type="primary" round @click="reset">清空</el-button>
    <div class="idClassMain">
      <div class="idclass" v-for="(value,key) in addIds">
          <p :key='key'>{{value}}</p>
          <img class="imgs" src="@/assets/401_images/chacha.png" @click="removeid(key)">
      </div>     
    </div>

    <el-button type="primary" round @click="getTpInfo">搜索</el-button>

    <el-table v-loading="loading" :data="responseList">
      <el-table-column label="人口编号" align="center" prop="numberCode" width="180" />
      <el-table-column label="身份证" align="center" prop="idCard" width="180" />
      <el-table-column label="市" align="center" prop="shi" />
      <el-table-column label="乡镇" align="center" prop="xian" width="100" />
      <el-table-column label="村" align="center" prop="cun" />
      <el-table-column label="姓名" align="center" prop="name" width="100"/>
      <el-table-column label="与户主关系" align="center" prop="relation"/>
      <el-table-column label="当前家庭人口数" align="center"  prop="count"/>
      <el-table-column label="脱贫年度" align="center"  prop="year"/>
    </el-table>

  </div>
</template>

<script>
import { tpInfo} from "@/api/system/gxzw";

export default {
  name: "SystemTenantPackage",
  components: {
  },
  data() {
    return {
      id: null,
      addIds: [],
      loading: false,
      responseList: null,
    };
  },

  methods: {
    getTpInfo(){
      this.loading = true;
      tpInfo(this.addIds).then(response => {
        console.log("tpinfo", response)
        this.responseList = response.data;
        console.log("this.responseList", this.responseList);
        this.loading = false;
      });
    },
    add(){
      console.log("aaaaa",this.id)
      let code = this.id.split(/[(\r\n)\r\n]+/);
      code.forEach((item, index) => { // 删除空项
        if (!item) {
          code.splice(index, 1);
        }
        else {
          this.addIds.push(item)
        }
      })
      this.addIds = Array.from(new Set(this.addIds));   
    },
    removeid(key){
      console.log("key",key);
      this.addIds.splice(key,1)
      console.log("addIds",this.addIds);
    },
    reset(){
      this.addIds = []
    }
  }
};
</script>
<style lang="scss" scoped>
.idclass {
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: antiquewhite;
}
.imgs {
  width: 20px;
  height: 20px;
}
.idClassMain {
  display: flex;
  height: 200px;
  border-style: solid;
  border-width: 1px;
  flex-wrap: wrap;
  overflow: auto 
}
</style>